<script setup lang="ts">
import { useSystemStore } from '@/store/main/system/system'
import { storeToRefs } from 'pinia'
import { UTCDateFormat } from '@/utils/utcTimeFormat'
import { ref } from 'vue'
interface Iprops {
  contentConfig: {
    pageName: string
    header?: {
      title?: string
      btnText?: string
    }
    tableItems: any[]
  }
}
const props = defineProps<Iprops>()

// 自定义事件
const emit = defineEmits(['userNewModelShow', 'userEditModalShow'])
// 请求数据 分页
const userStore = useSystemStore()
const currentPage = ref(1)
const pageSize = ref(10)
// 分页发送请求
function fetchPageData(formData: any = {}) {
  // console.log('formData', { ...formData })
  const size = pageSize.value
  const offset = (currentPage.value - 1) * size
  const info = { size, offset }
  const queryInfo = { ...info, ...formData }
  userStore.postPageListsAction(props.contentConfig.pageName, queryInfo)
}

fetchPageData()
// 展示数据
const { pageLists, pageTotalCount } = storeToRefs(userStore)
function handleSizeChange() {
  currentPage.value = 1
  pageSize.value = 10
  fetchPageData()
}
function handleCurrentChange() {
  fetchPageData()
}
// 添加新用户
function addNewUserBtnClick() {
  emit('userNewModelShow')
}
// 点击删除
function deleteUserBtnClick(id: number) {
  console.log('删除id:', id)
  userStore.deletePageItemByIdAction(props.contentConfig.pageName, id)
}

// 点击编辑
function editUserBtnClick(itemData: any) {
  console.log(itemData)
  emit('userEditModalShow', itemData)
}

defineExpose({
  fetchPageData,
  handleSizeChange
})
</script>
<template>
  <div class="user-content">
    <div class="main-header">
      <div class="content-title">
        <h3>{{ contentConfig.header?.title }}</h3>
      </div>
      <div class="content-btnbox">
        <el-button type="primary" @click="addNewUserBtnClick">
          {{ contentConfig.header?.btnText }}
        </el-button>
      </div>
    </div>
    <div class="main-table">
      <el-table :data="pageLists" border style="width: 100%">
        <template v-for="item in contentConfig.tableItems" :key="item.prop">
          <template v-if="item.type === 'timer'">
            <el-table-column :prop="item.prop" :label="item.label">
              <template #default="scope">
                {{ UTCDateFormat(scope.row[item.prop]) }}
              </template>
            </el-table-column>
          </template>
          <template v-else-if="item.type === 'action'">
            <el-table-column :label="item.label">
              <template #default="scope">
                <div class="operation-box">
                  <el-button
                    @click="editUserBtnClick(scope.row)"
                    type="primary"
                    text
                    size="small"
                  >
                    <el-icon><EditPen /></el-icon>
                    编辑
                  </el-button>
                  <el-button
                    @click="deleteUserBtnClick(scope.row.id)"
                    type="primary"
                    text
                    size="small"
                  >
                    <el-icon><Delete /></el-icon>
                    删除
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </template>
          <template v-else-if="item.type === 'custom'">
            <el-table-column v-bind="item">
              <template #default="scope">
                <!-- 自定义具名插槽：定制列 -->
                <slot :name="item.slotName" v-bind="scope" :prop="item.prop">
                </slot>
              </template>
            </el-table-column>
          </template>
          <template v-else>
            <el-table-column
              :type="item.type"
              :width="item.width"
              :prop="item?.prop"
              :label="item?.label"
            />
          </template>
        </template>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30]"
        small
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<style scoped lang="less">
.user-content {
  background-color: #fff;
  padding: 20px;
  margin-top: 15px;
  border-radius: 7px;
  .main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .main-table {
    margin-top: 15px;
    margin-bottom: 15px;
    .operation-box {
      display: flex;
      justify-content: left;
      align-items: center;
      .el-button + .el-button {
        margin-left: 0;
      }
    }
  }
  .pagination {
    display: flex;
    justify-content: end;
    align-items: center;
  }
}
</style>
